<template>
    <div class="category-detail-page">
        <el-card shadow="never">
            <el-form
                :model="form"
                label-position="right"
                label-suffix=":"
                label-width="100px"
                ref="form"
                :rules="rules">
                <el-form-item label="图片" prop="img">
                    <file-upload :type="1" :multiple="false" v-model="form.img">
                        <img
                            v-if="form.img"
                            :src="form.img"
                            class="uploader-icon picture image-uploader"
                        />
                        <i v-else class="el-icon-plus uploader-icon picture image-uploader"></i>
                    </file-upload>
                </el-form-item>
                <el-form-item label="自定义文本" prop="content">
                    <el-input
                        v-model="form.content"
                        placeholder="请输入文本内容, 文本长度不超出30个字符"
                        class="input-width"
                        maxlength="30"
                        type="textarea"
                        autosize
                    ></el-input>
                </el-form-item>
                <el-form-item label="选择跳转内容" prop="study_id">
                    <el-button type="primary" @click="getCourse">{{ "选取跳转内容" }}</el-button>
                    <course-list
                        v-show="courseList.length > 0"
                        :list="courseList"
                        @delete="deleteCourse"></course-list>
                </el-form-item>
                <course-dialog
                ref="course"
                :studyId="form.study_id"
                :companyId="form.company_id"
                @addCourse="addCourseHandle"></course-dialog>
            </el-form>
            <div class="text-center">
                <el-button :loading="posting" type="primary" @click="onSave">保 存</el-button>
            </div>
        </el-card>
    </div>
</template>

<script>
import FileUpload from '../../components/base/FileUpload';
import CourseDialog from '../../components/dialog/CourseDialog';
import CourseList from '../../components/page/CourseList';

export default {
    components: {
        FileUpload,
        CourseDialog,
        CourseList,
    },
    data() {
        return {
            posting: false,
            form: {
                img: '',
                // 仅支持对课程类型进行跳转
                type: 1,
                study_id: '',
                content: '',
                course: '',
                company_id: '',
            },
            id: this.$route.params.id,
            courseList: [],
            courseOptions: [],
            rules: {
                img: [
                    { required: true, message: '图片资源不能为空', trigger: 'blur' },
                ],
            },
        };
    },
    methods: {
        onSave() {
            this.$refs.form.validate((valid) => {
                if (!valid) return;
                if (this.form.content.length > 30) {
                    $ele.$message.error('自定义文本不能超过30个字符');
                    return;
                }
                this.posting = true;
                if (this.id) {
                    API.put(`banner/edit/${this.id}`, this.form).then(() => {
                        this.posting = false;
                        this.$router.go(-1);
                    }).catch(err => {
                        $ele.$message.error(err.message);
                    }).finally(() => this.posting = false);
                } else {
                    API.post('banner', this.form).then(() => {
                        this.posting = false;
                        this.$router.push({name: 'BannerManage'});
                    }).catch(err => {
                        $ele.$message.error(err.message);
                    }).finally(() => this.posting = false);
                }
            });
        },
        fetchData() {
            if (this.id) {
                API.get(`banner/${this.id}`).then((res) => {
                    for (const i of Object.keys(this.form)) {
                        if (res[i] || res[i] === 0) this.form[i] = res[i];
                    }
                    if (res.course) {
                        this.courseList = res.course;
                    }
                });
            }
        },
        fetchCourseData() {
            API.get('course/list').then((res) => {
                this.courseOptions = res;
            });
        },
        addCourseHandle(course) {
            this.courseList = [];
            this.courseList.push(course);
            this.form.study_id = course.id;
            $ele.$message.success('选择跳转内容成功');
            this.$refs.course.close();
        },
        getCourse() {
            this.$refs.course.open();
        },
        deleteCourse(index) {
            this.courseList.splice(index, 1);
            this.form.study_id = '';
        },
    },
    mounted() {
        this.fetchData();
    },
};
</script>

<style lang="scss">
.category-detail-page {
    .input-width {
        width: 300px;
    }
    .picture {
        width: 200px;
        height: 200px;
        line-height: 200px;
    }
    .uploader-icon {
        font-size: 20px;
        color: #8c939d;
        text-align: center;
    }
    .image-uploader {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .el-textarea__inner {
        padding: 8px 15px;
    }
}
</style>
